<template>
  <div>
    <div class="toolbar">
      <el-row>
        <el-button type="primary" @click="add">增加</el-button>
        <el-button type="success" @click="edit">编辑</el-button>
        <el-button type="danger" @click="del">删除</el-button>
      </el-row>
    </div>
    <div class="table">
      <el-card class="box-card">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="course"
            label="课程名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="作业名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="publisher"
            label="发布人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="content"
            label="作业内容">
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <work-edit-form
      :dialogFormVisible="dialogFormVisible"
      :type="type"
      :id="id"
      @onClose="formClose"
    ></work-edit-form>
  </div>
</template>

<script>
    import WorkEditForm from "./WorkEditForm";

    export default {
        name: "WorkManagement",
        components: {WorkEditForm},
        data() {
            return {
                tableData: [{
                    course: '《大学语文》',
                    name: '《作业一》',
                    publisher: '刘老师',
                    content: '抄写课文20遍'
                },
                    {
                        course: '《大学语文》',
                        name: '《作业一》',
                        publisher: '刘老师',
                        content: '抄写课文20遍'
                    },
                    {
                        course: '《大学语文》',
                        name: '《作业一》',
                        publisher: '刘老师',
                        content: '抄写课文20遍'
                    },
                    {
                        course: '《大学语文》',
                        name: '《作业一》',
                        publisher: '刘老师',
                        content: '抄写课文20遍'
                    },
                    {
                        course: '《大学语文》',
                        name: '《作业一》',
                        publisher: '刘老师',
                        content: '抄写课文20遍'
                    }],
                multipleSelection: [],
                dialogFormVisible: false,
                type: "add",
                id:null
            }
        },
        mounted() {
            this.queryList();
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            queryList() {
                this.$axios.get("/workPublish/list").then(res => {
                    if (res.data && res.data.code == 200) {
                        this.tableData = res.data.result;
                    }
                }).catch(err => {
                    console.log("请求失败!")
                })
            },
            add() {
                this.type = "add";
                this.id=null;
                this.dialogFormVisible = true;
            },
            edit() {
                if(this.multipleSelection.length==1) {
                    this.type = "edit";
                    this.id = this.multipleSelection[0].id;
                    this.dialogFormVisible = true;
                }else{
                    this.$message({
                        message: '请选择一条数据!',
                        type: 'warning'
                    });
                }
            },
            del() {
                if(this.multipleSelection.length>0){
                  let ids=this.multipleSelection.map(x=>{return x.id});
                  this.$axios.post("/workPublish/delete",ids).then(res=>{
                      if(res.data&&res.data.code==200){
                          this.$message({
                              message: '删除成功!',
                              type: 'success'
                          });
                          this.queryList();
                      }
                  })
                }else{
                    this.$message({
                        message: '请选择要删除的数据!',
                        type: 'warning'
                    });
                }
            },
            formClose() {
                this.dialogFormVisible = false;
                this.queryList();
            }
        }
    }
</script>

<style scoped>
  .toolbar {
    text-align: left;
    margin-bottom: 20px;
  }
</style>
